<template>
	<view class="tabs" :style="{ boxShadow: boxShadow, borderRadius: borderRadius + 'rpx' }">
		<view
			class="tabs-item"
			:class="{ active: idx === current }"
			v-for="(item, idx) in list"
			:key="idx"
			@click="change(idx)"
			:style="{ fontSize: fontSize + 'rpx', color: color, height: height + 'rpx' }"
		>
			{{ item }}
			<view class="tabs-item-line" v-if="showLine"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				default () {
					return []
				},
				type: Array
			},
			fontSize: Number,
			color: String,
			borderRadius: Number,
			boxShadow: String,
			showLine: {
				type: Boolean,
				default: false
			},
			height: {
				type: Number,
				default: 90
			}
		},
		data () {
			return {
				current: 0
			}
		},
		methods: {
			change (idx) {
				this.current = idx
				this.$emit('change', idx)
			}
		}
	}
</script>

<style lang="scss">
	.tabs {
		display: flex;
		&-item {
			display: flex;
			justify-content: center;
			align-items: center;
			flex: 1;
			position: relative;
			background: #FFFFFF;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			&-line {
				content: '';
				height: 4rpx;
				position: absolute;
				width: 0;
				bottom: 0;
				transition: width .5s;
			}
			&.active {
				color: #FBB000;
				.tabs-item-line {
					background: #FBB000;
					width: 80rpx;
				}
			}
		}
	}
</style>
